<template>
  <div>

 <h1 class="title">{{building_id}}号楼</h1>
 <div class="info">
  <div class="img">
  <img  class="pic" :src="imgUrl + building.building_image" alt="">
 </div>

 <div class="detail">
  <h3>基本信息</h3>
  <p>
    <span>
   可选性别：<span v-for="(item) in building.building_gender" :key="item">{{genderConvert(item)}} </span>
  </span>
  </p>

  <!-- <p> -->
    <!-- <span>
    房型：{{ building.room_struct }}
  </span>
  </p> -->
   
  <p>
    <span>
    可选房间：<span v-for="(type) in building.building_roomType" :key="type">{{ type }}人间  </span>
  </span>
  </p>
  
  
  <h3>设施</h3>
  <div class="facifacility_listlity_list" >
  <span v-for="facility in building.facilityList" :key="facility.facility_id">
  <i  style="margin:5px" :class="facility.icon">{{ facility.facility_name }}</i>
  </span>
  </div>

 
  
  <h3>描述</h3>
  <p>
   {{   building.building_description}}
  </p>
 </div>


</div>
<div class="roomList">
  <h3 class="title">房间列表</h3>
  <el-table class="table" :data="table" stripe style="width: 80%">
    <el-table-column prop="room_id" label="房间号" width="auto" />
    <el-table-column  
    
    prop="room_gender" label="性别" width="auto"
    :filters="[{ text: '男', value:  1 }, { text: '女', value: 0}]"
    :filter-method="filterGender"
    filter-placement="bottom-end"
    >
      <template slot-scope="scope">
      <p>{{ genderConvert(scope.row.room_gender)}}
      </p>
      </template></el-table-column>
    <el-table-column prop="room_type" label="几人间" width="auto"
    :filters="[{ text: '单人间', value:  1 }, { text: '二人间', value: 2}, { text: '三人间', value: 3}, { text: '四人间', value: 4}, { text: '五人间', value: 5}, { text: '六人间', value: 6}, { text: '七人间', value: 2}, { text: '八人间', value: 8}]"
    :filter-method="filterPeople"
    filter-placement="bottom-end"
    >
      <template slot-scope="scope">
        <i class="el-icon-s-custom" v-for="o in scope.row.room_type" :key="o"></i>
      </template>
    </el-table-column>
    <el-table-column prop="room_inventory" label="剩余床位" 
    :filters="[{ text: '>0', value:  0 }, { text: '>2', value: 2}, { text: '>3', value: 3}, { text: '>4', value: 4}]"
    :filter-method="filterStock"
    filter-placement="bottom-end"
    with="auto"/>
    <el-table-column
      fixed="right"
      label="操作"
      width="auto">
      <template slot-scope="scope">
        <el-button
          :disabled="isNotAble"
          @click="showRoomDetail(scope.row)"
          type="text"
          size="small">
          预订
        </el-button>
      </template>
    </el-table-column>


  </el-table>
  
  <RoomDetail :visible.sync="popupVisible" :room="this.chosenRoom" :captcha-visible="true"  @close="closePopup" />

  <!-- <RoomList></RoomList> -->

</div>


 
</div>


</template>

<script>
// @ is an alias to /src
// import  RoomList from '@/components/RoomList.vue'
import{getBuildingByBID} from '@/api/dormitory.js'
import{getRoomsByBuildingID} from '@/api/room.js'
import RoomDetail from './RoomDetail.vue'
import{genderConvert} from '@/utils/convert'

export default {

  components: {
    // RoomList
    RoomDetail
  },
  data(){
    return {
      
        building_id:this.$route.params.building_id,
        
        imgUrl:"http://localhost:28080/",
        building:{},
        table:[],
        popupVisible: false,
        chosenRoom:{},
        isNotAble:null
       
        
    }
  },


  
  created(){
    //监听是否到达可点按钮的时间
  
    
   
  },
  destroyed(){
    //不释放会内存泄漏
    this.$root.Bus.$off('isNotAble');
  },
  
  mounted (){
    this.$root.Bus.$on('isNotAble',value=>{
      this.isNotAble=value
      console.log(this.isNotAble)
    })
   
    getBuildingByBID(this.building_id).then(res=>{
      try{
        this.building=res.data
      }catch{
        this.$message.error("获取失败")
      }
  
      
         
      
    
    })
    getRoomsByBuildingID(this.building_id).then(res=>{
      try{
        this.table=res.data
      }catch{
        this.$message.error("获取失败")
      }
        // this.table.forEach(function(room){
        //     room.room_gender=genderConvert(room.room_gender)
          
        
        // })
        
      
      
  })},
   methods: {
    showRoomDetail(room) {
      
      this.popupVisible = true;
      // alert(this.popupVisible)
      this.chosenRoom=room;
    },
    closePopup() {
      this.popupVisible = false;
    },
    genderConvert(value){
      return genderConvert(value)
    },
    //filter
    resetDateFilter() {
        this.$refs.filterTable.clearFilter('date');
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },
      formatter(row) {
        return row.address;
      },
      filterGender(value, row) {
        return row.room_gender === value;
      },
      filterPeople(value, row) {
        return row.room_type === value;
      },
      filterStock(value, row) {
        return row.room_inventory>value;
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      }
    
  }}
</script>

<style scoped>
.info{
  display: flex; 
  /* position: fixed; */
  margin: 20px;
  justify-content:  left  ; 
  /* background-color: blue; */
  
}
.img{

  /* height: 200px;
  /* width:200px;  */
  /* background-color: green ; */
  /* margin-left: 10%; */

}
.pic{
  width: 100%;
  height: auto;
}
.detail{
  margin:auto ;
  /* position: absolute;
  right: 5px; */
  /* top:20px; */

  /* position: fixed; */
  
  /* background-color: red; */
  /* position: relative; */
  /* right: 5%; */
  /* margin-right:10%; */
  /* width:70% */
}
.table{
  margin: auto;
}


.title{
  display: flex;
  justify-content: left;
  margin-left: 10%;
}

.facility_list { 
  /* width: 98%; */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; 
  /* // 替代原先的space-between布局方式 */
}
.facility_list span { 
    flex: 1;
    /* height: 120px; */
    /* margin: 0 5px 5px 0; */
    /* background-color: #999; */
    width: calc((100% - 10px) / 3);  
    min-width: calc((100% - 10px) / 3); 
    max-width: calc((100% - 10px) / 3); 
    &:nth-child(3n) { 
      margin-right: 0;
    }
 }
</style>
